<template>
  <div class="m-main">
    {{first_layer}}
    <el-card>
      <div>
        <el-page-header content="车位规划"></el-page-header>
      </div>
    </el-card>
    <el-card>
      <div>
        <el-row :gutter="10" class="header">
          <el-col :span="6"
            ><div class="font-medium sub-title">车位分块信息</div></el-col
          >
          <el-col :offset="12" :span="6">
            <div class="btn-group">
              <el-button
                type="primary"
                class="btn"
                @click="update_dialogVisible = true"
                >修改分区</el-button
              >
              <el-button type="primary" @click="msubmit" class="btn" plain
                >保存</el-button
              >
            </div>
          </el-col>
        </el-row>

        <el-divider></el-divider>
        <el-tabs type="border-card">
          <el-tab-pane
            :label="item.region"
            v-for="item of form"
            :key="item.region"
          >
            <div>
              <el-descriptions title="区域信息" :column="1">
                <el-descriptions-item label="区域一级分类">{{
                  item.region
                }}</el-descriptions-item>
                <el-descriptions-item label="售出车位个数">{{
                  item.saled.length
                }}</el-descriptions-item>
                <el-descriptions-item label="在售车位个数">{{
                  item.onSale.length
                }}</el-descriptions-item>
                <el-descriptions-item label="未上架车位个数">
                  {{ item.notOnSale.length }}
                </el-descriptions-item>
                <el-descriptions-item label="区域规划图">
                  <el-upload
                    :action="item.region"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :on-success="handleSuccess"
                    :http-request="upload"
                    :auto-upload="false"
                    :ref="item.region + 'upload'"
                    :label="item.region"
                    :file-list="item.fileList"
                  >
                    <el-button
                      size="small"
                      type="text"
                      style="display: inline"
                      slot="trigger"
                      >点击上传</el-button
                    >
                  </el-upload>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>

    <el-dialog title="" :visible.sync="dialogVisible" width="width">
      <div>
        <div class="font-medium sub-title">区域规划图</div>
        <div class="design-img-contianner">
          <img
            src="../assets/rigion-design.jpg"
            alt=""
            class="design-img"
            style="height: 400px"
          />
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="修改区划"
      :visible.sync="update_dialogVisible"
      width="width"
    >
      <div>
        <el-tree
          :data="data"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          <span
            class="custom-tree-node"
            style="width: 100%; display: flex; justify-content: space-between"
            slot-scope="{ node, data }"
          >
            <input
              type="text"
              @blur="blur(data)"
              v-if="data.showInput"
              v-model="currentName"
              style="flex: 1; border: 0px; outline: none"
            />
            <span @click="update(data)" v-else style="flex: 1">{{
              node.label
            }}</span>
            <span>
              <el-button
                type="text"
                size="mini"
                icon="el-icon-plus"
                @click="() => append(data)"
              >
              </el-button>
              <el-button
                icon="el-icon-minus"
                type="text"
                size="mini"
                @click="() => remove(node, data)"
              >
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
let id = 1000;
export default {
  watch:{
    first_layer(newvalue){
      let url = "http://47.99.124.245:8082"
      let params = {
        region1:newvalue,
        region2:"",
        region3:""
      }

      this.$axios({
        method:'get',
        url:url,
        params:params
      }).then(res=>{
        console.log(res)
      }).catch(err=>{
        console.log(err)
      })
    }
  },
  computed:{
    first_layer(){
      let res = []
      for(let i of this.data[0].children){
        res.push(i.value)
      }
      return res
    },
  },
  mounted() {
    let url =
      "http://47.99.124.245:8082/getRegion?propertyname=" +
      this.$store.state.current_property.area;
    this.axios({
      method: "get",
      url: url,
    })
      .then((res) => {
        let data = res.data.data;
        let layer_first = new Map();
        for (let i of data) {
          if (layer_first.has(i.region1)) {
            let layer_sec = layer_first.get(i.region1);
            if (i.region2 != "" && i.region2 != "null") {
              if (layer_sec.has(i.region2)) {
                if (i.region3 != "" && i.region3 != "null") {
                  let layer_third = layer_sec.get(i.region2);
                  layer_third.push(i.region3);
                }
              } else {
                layer_sec.set(i.region2, []);
                if (i.region3 != "" && i.region3 != "null") {
                  let layer_third = layer_sec.get(i.region2);
                  layer_third.push(i.region3);
                }
              }
            }
          } else {
            layer_first.set(i.region1, new Map());
            if (i.region2 != "" && i.region2 != "null") {
              let layer_sec = layer_first.get(i.region1);
              layer_sec.set(i.region2, []);
              if (i.region3 != "" && i.region3 != "null") {
                let layer_third = layer_sec.get(i.region2);
                layer_third.push(i.region3);
              }
            }
          }
        }

        if (data) {
          this.data = [
            {
              id: "a",
              label: "车位规划",
              value: "车位规划",
              showInput: false,
              children: [],
            },
          ];
        } else {
          this.data = [
            {
              id: "a",
              label: "车位规划",
              value: "车位规划",
              showInput: false,
              children: [],
            },
          ];
        }

        for (let i of layer_first) {
          console.log(i);
          let obj = {
            id: id++,
            label: i[0],
            value: i[0],
            showInput: false,
            children: [],
          };
          //已经见底了
          if (i[1].size == 0) {
            if (obj.children.length == 0) {
              this.$delete(obj, "children");
            }
            this.data[0].children.push(obj);
          } else {
            for (let j of i[1]) {
              let subobj = {
                id: id++,
                label: j[0],
                value: j[0],
                showInput: false,
                children: j[1],
              };
              if (subobj.children.length == 0) {
                this.$delete(subobj, "children");
              }
              obj.children.push(subobj);
            }

            if (obj.children.length == 0) {
              this.$delete(obj, "children");
            }
            this.data[0].children.push(obj);
          }
        }
      })
      .catch((err) => {
        console.err(err);
      });
  },
  components: {
    ElImageViewer,
  },
  methods: {
    //发送网络请求修改数据库
    add() {
      let regions = ["null", "null", "null"];
      let createUrl_origion = function (r1, r2, r3) {
        return [
          `http://47.99.124.245:8082/addRegion`,
          { r1: r1, r2: r2, r3: r3 },
        ];
      };
      let createUrl = createUrl_origion.bind(this);

      let help_origin = function (url, params) {
        this.axios({
          method: "post",
          url: url,
          data: params,
        })
          .then((res) => {
            console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
      };
      let help = help_origin.bind(this);
      let axois_add = function (obj, regions, deep) {
        regions[deep] = obj.value;
        if (obj.children.length == 0) {
          help(...createUrl(...regions));
        } else {
          for (let i of obj.children) {
            axois_add(i, regions, deep + 1);
          }
        }
        regions[deep] = "null";
      };
      //现在的Data是一个数组
      let data = this.data[0].children;
      for (let i of data) {
        axois_add(i, regions, 0);
      }
    },
    //修改区划
    blur(data) {
      data.showInput = !data.showInput;
      data.label = this.currentName;
      data.value = data.label;
      this.currentName = "";
    },
    update(data) {
      data.showInput = !data.showInput;
      this.currentName = data.label;
    },
    append(data) {
      console.log(data);
      const newChild = {
        id: String(id++),
        label: "新建区划",
        value: "新建区划",
        children: [],
        showInput: false,
      };
      data.children.push(newChild);
    },
    beforeUpdate(data) {
      data.showInput = !data.showInput;
      data.label = this.currentName;
    },
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },
    //显示图片
    dialogBeforeClose() {},
    msubmit() {
      for (let i of this.form) {
        let name = i.region + "upload";
        let upper = this.$refs[name][0];
        upper.submit();
      }
    },
    upload(arg) {
      let target = arg.action;
      let file = arg.file;
      for (let i of this.form) {
        console.log(i);
        if (i.region == target) {
          i.img = file;
          return;
        }
      }
    },
    beforeRemove() {},
    handleRemove() {},
    handleSuccess(response, file, fileList) {
      console.log(response), console.log(file);
      console.log(fileList);
    },
    handlePreview(file) {
      console.log(file.url);
      this.dialogVisible = true;
      // var reader = new FileReader();
      // let imgFile = null
      // reader.onload=function(e) {
      //       // alert('文件读取完成');
      //       imgFile = e.target.result;
      //       console.log(imgFile);
      //   };
      // reader.readAsDataURL(file);
      this.currentItem = file;
    },
  },
  data() {
    return {
      data: [
        {
          id: "a",
          label: "车位规划",
          value: "车位规划",
          showInput: false,
          children: [],
        },
      ],
      currentItem: null,
      update_dialogVisible: false,
      dialogVisible: false,
      form: [
        {
          region: "A",
          saled: ["A-01", "A-02", "A-03"],
          onSale: ["A-01", "A-02", "A-03"],
          notOnSale: ["A-01", "A-02", "A-03"],
          img: null,
          fileList: [],
        },
        {
          region: "B",
          saled: ["A-01", "A-02", "A-03"],
          onSale: ["A-01", "A-02", "A-03"],
          notOnSale: ["A-01", "A-02", "A-03"],
          img: null,
          fileList: [],
        },
        {
          region: "C",
          saled: ["A-01", "A-02", "A-03"],
          onSale: ["A-01", "A-02", "A-03"],
          notOnSale: ["A-01", "A-02", "A-03"],
          img: null,
          fileList: [],
        },
      ],
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      regionAllInfo: [
        {
          region: "A",
          saled: ["A-01", "A-02", "A-03"],
          onSale: ["A-01", "A-02", "A-03"],
          notOnSale: ["A-01", "A-02", "A-03"],
        },
      ],
    };
  },
};
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
}
.header .btn {
  width: 40%;
}
.btn-group {
  display: flex;
  min-width: 10rem;
}
.font-medium {
  font-size: 16px;
  font-weight: bold;
}
.sub-title {
  margin: 1rem;
}

.design-img {
  height: 100%;
}
.el-card {
  margin-top: 1rem;
}
</style>